<template>
    <el-dialog
        width="410px"
        :title="`${currentType === 1 ? '推送选项' : '推送检查'}`"
        :model-value="modelValue"
        @closed="handleClose"
    >
        <el-form ref="addFormRef" :model="addForm" label-position="top" :rules="addFormRulesData">
            <el-form-item label="上刊日期" prop="skDate">
                <el-date-picker
                    v-model="addForm.skDate"
                    type="date"
                    placeholder="选择日期"
                    :disabled-date="currentType === 1 ? disabledSkDate : disabledCheckSkDate"
                    value-format="YYYY-MM-DD"
                    @change="changeDate"
                />
            </el-form-item>
            <el-form-item label="下刊日期" prop="xkDate">
                <el-date-picker
                    v-model="addForm.xkDate"
                    :disabled-date="currentType === 1 ? disabledXkDate : disabledCheckXkDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <el-form-item v-if="$btnAuth('singleWeek') || $btnAuth('doubleWeek')" label="推送周数" prop="doubleWeek">
                <el-radio-group v-model="addForm.doubleWeek">
                    <el-radio v-if="$btnAuth('singleWeek')" :label="false">单周</el-radio>
                    <el-radio v-if="$btnAuth('doubleWeek')" :label="true">双周（次周上刊日期{{ dateWeek }}）</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="媒体类型" prop="system">
                <el-radio-group v-model="addForm.system">
                    <el-radio :label="1">梯内</el-radio>
                    <el-radio :label="2">梯外</el-radio>
                    <el-radio :label="3">全部</el-radio>
                </el-radio-group>
            </el-form-item> -->
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button size="large" @click="handleClose">取消</el-button>
                <el-button size="large" type="primary" :loading="btnLoading" @click="submit">{{
                    currentType === 1 ? '确认推送' : '检查'
                }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { publishCheck, publishPushout } from '@/api/advertisingPush';
import { useStore } from 'vuex';
import { addPushFormRules } from './rules.ts';
import dayjs from 'dayjs';
import { $btnAuth, validateForm } from '@/utils/common';
import type { FormInstance, FormRules } from 'element-plus';

const store = useStore();
const userInfo = computed(() => store.state.userGroup.userInfo);
const emits = defineEmits<{ (e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    currentType: {
        type: Number,
        default: 1,
    },
});
const addFormRef = ref<FormInstance>();
const addFormRulesData = reactive<FormRules>(addPushFormRules);
const dateWeek = ref();
const btnLoading = ref(false);
const disabledSkDate = (date: Date) => dayjs(date).isBefore(dayjs(), 'day') || dayjs(date).isAfter(dayjs(), 'day');
const disabledCheckSkDate = (date: Date) => dayjs(date).isBefore(dayjs(), 'day');
const disabledXkDate = (date: Date) =>
    dayjs(date).isBefore(dayjs().subtract(1, 'day'), 'day') || dayjs(date).isAfter(dayjs().subtract(1, 'day'), 'day');
const disabledCheckXkDate = (date: Date) => dayjs(date).isBefore(dayjs().subtract(1, 'day'), 'day');
const addForm = reactive({
    pushUserId: userInfo.value.userId,
    pushUser: userInfo.value.realName,
    city: userInfo.value.cityList[0].cityCode,
    supplier: userInfo.value.groupCode,
    skDate: dayjs().format('YYYY-MM-DD'),
    xkDate: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
    doubleWeek: '',
    // system: '',
});

const changeDate = (date: Date) => {
    const day = dayjs(date).day();
    let dateDayWeek;
    if(day === 6) {
        dateDayWeek = dayjs(date).add(1,'week').endOf('week');
    }
    else {
        dateDayWeek  = dayjs(date).endOf('week');
    }
    dateWeek.value = dayjs(dateDayWeek.$d).format('YYYY-MM-DD');
};
onMounted(() => {
    changeDate(dayjs());
});
const handleClose = () => {
    emits('update:modelValue', false);
};
const submit = async () => {
    await validateForm(addFormRef.value);
    btnLoading.value = true;
    try {
        if (props.currentType === 1) {
            await publishPushout(addForm);
        } else {
            await publishCheck(addForm);
        }
    } finally {
        btnLoading.value = false;
    }

    ElMessage.success('操作成功');
    handleClose();
    emits('success');
};
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 20px;
}
</style>
